<template>
  <el-dialog width="80%" :visible.sync="dialogVisible">
    <el-form label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="病人主述文本：">
            <span>{{obj.userSymptom}}</span>
            <!-- <el-input type="textarea" /> -->
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 动态增减tag -->
      <el-row>
        <el-form-item label="关键词：">
          <!-- 显示tag -->
          <el-tag
            v-for="tag in obj.symptom"
            :key="tag"
            @close="handleClose(tag)"
          >
            {{ tag.symName }}
          </el-tag>
          <!-- 增加tag -->
          <el-input
            v-if="inputTagShow"
            ref="saveTagInput"
            v-model="inputTag"
            class="input-new-tag"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="updateState(3)">接诊</el-button>
          <el-button type="warning" @click="Recommended">拒绝接诊并推荐其他科室</el-button>
        </el-form-item>
      </el-row>
      <!-- 推荐科室 -->
      <el-row v-show="shouState">
        <el-form-item label="拒绝原因：">
          <el-input v-model="value" placeholder="请输入拒绝原因以及推荐科室"></el-input>
        </el-form-item>
      </el-row>
      <!-- 确定接诊 -->
      <el-form-item v-show="shouState">
        <el-button type="primary" @click="updateState(2)">
          确定
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { updateOrderState } from '@/api/user'
export default {
  name: 'patientText',
  data() {
    return {
      obj:{},
      shouState: false,
      dialogVisible:false,
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputTagShow: false, // 新增tag显示
      inputTag: '', // 新增tag内容
      options: [{
        value: '选项1',
        label: '黄金糕'
      }
      ],
      value: ''
    }
  },
  methods: {
    // 修改订单状态
    updateState(state){
      let data = {};
      data.orderId = this.obj.orderId;
      data.state = state;
      data.remark = this.value;
      updateOrderState(data);
      this.shouState = false;
      this.dialogVisible = false;
      // 抛出点击事件
      this.$emit("updateState");
    },
    // 移除tag
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      console.log(tag)
    },
    // 新增tag内容
    handleInputConfirm() {
      if (this.inputTag) { // 新增tag有值加到tags中
        this.dynamicTags.push(this.inputTag)
      }
      this.inputTagShow = false // 增加完之后让inputTag隐藏
      this.inputTag = '' // 清空inputTag内容
    },
    // 新增tag内容按钮
    showInput() {
      this.inputTagShow = true // 让新增tag内容input显示
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus() // 聚焦
      })
    },
    // 推荐其他科室
    Recommended() {
      this.shouState = true;
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-tag + .el-tag {
    margin-left: 10px;
  }
.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
